gameInfo = {
    roomId: null,
    thisUserId: null,
    thatUserId: null,
    isWhite: true,
}
//////////////////////////////////////////////////
// 设定界⾯显⽰相关操作
//////////////////////////////////////////////////
function setScreenText(me) {
    let screen = document.querySelector('#screen');
    if (me) {
        screen.innerHTML = "轮到你落⼦了!";
    } else {
        screen.innerHTML = "轮到对⽅落⼦了!";
    }
}
//////////////////////////////////////////////////
// 初始化 websocket
let websocketUrl = 'ws://'+location.host+'/game';
let websocket = new WebSocket(websocketUrl);

websocket.onopen = function(){
    console.log("连接游戏房间成功");
}
websocket.onmessage = function(result){
    console.log("[handlerGameReady]"+result.data);
    let resp = JSON.parse(result.data);
    if(!resp.ok){
        alert("连接游戏失败");
        location.assign("/game_hall.html");
        return;
    }
    if(resp.message == "gameReady"){
        gameInfo.roomId = resp.roomId;
        gameInfo.thisUserId = resp.thisUserId;
        gameInfo.thatUserId = resp.thatUserId;
        gameInfo.isWhite = (resp.thisUserId == resp.whiteUser);
        //初始话棋盘
        initGame();
        //设置显示区域类容
        setScreenText(gameInfo.isWhite);
    }else if(resp.message == 'repeatConnection'){
        alert("检测到游戏多开! 请使用其他账号登录!");
        location.assign("/login.html");
        // location.replace("/login.html")
        return;
    }
}
websocket.onerror =  function(){
    console.log("和服务器的连接出现异常");
}
window.onbeforeunload = function(){
    websocket.onclose;
}
websocket.onclose = function(){
    console.log("和游戏服务器断开连接");
}

//////////////////////////////////////////////////
// TODO
//////////////////////////////////////////////////
function initGame() {
    // 是我下还是对⽅下. 根据服务器分配的先后⼿情况决定
    let me = gameInfo.isWhite;
    // 游戏是否结束
    let over = false;
    let chessBoard = [];
    //初始化chessBord数组(表⽰棋盘的数组)
    for (let i = 0; i < 15; i++) {
        chessBoard[i] = [];
        for (let j = 0; j < 15; j++) {
            chessBoard[i][j] = 0;
        }
    }
    let chess = document.querySelector('#chess');
    let context = chess.getContext('2d');
    context.strokeStyle = "#BFBFBF";
    // 背景图⽚
    let logo = new Image();
    logo.src = "image/sky.jpeg";
    logo.onload = function () {
        context.drawImage(logo, 0, 0, 450, 450);
        initChessBoard();
    }
    // 绘制棋盘⽹格
    function initChessBoard() {
    for (let i = 0; i < 15; i++) {
        context.moveTo(15 + i * 30, 15);
        context.lineTo(15 + i * 30, 430);
        context.stroke();
        context.moveTo(15, 15 + i * 30);
        context.lineTo(435, 15 + i * 30);
        context.stroke();
        }
    }
    // 绘制⼀个棋⼦, me 为 true
    function oneStep(i, j, isWhite) {
        context.beginPath();
        context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);
        context.closePath();
        var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 
        30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0);
        if (!isWhite) {
            gradient.addColorStop(0, "#0A0A0A");
            gradient.addColorStop(1, "#636766");
        } else {
            gradient.addColorStop(0, "#D1D1D1");
            gradient.addColorStop(1, "#F9F9F9");
        }
        context.fillStyle = gradient;
        context.fill();
    }
    chess.onclick = function (e) {
        if (over) {
            return;
        }
        if (!me) {
            return;
        }
        let x = e.offsetX;
        let y = e.offsetY;
        // 注意, 横坐标是列, 纵坐标是⾏
        let col = Math.floor(x / 30);
        let row = Math.floor(y / 30);
        if (chessBoard[row][col] == 0) {
        // TODO 发送坐标给服务器, 服务器要返回结果
            send(row,col);
            // oneStep(col, row, gameInfo.isWhite);
            // chessBoard[row][col] = 1;
        }
    }
    // TODO 实现发送落⼦请求逻辑, 和处理落⼦响应逻辑. 
    function send(row,col){
        let request = {
            message:"putChess",
            userId : gameInfo.thisUserId,
            row:row,
            col:col
        };
        websocket.send(JSON.stringify(request));
    }
    //处理落子响应
    websocket.onmessage = function(event){
        console.log("handleerPutChess"+event.data);
        let resp = JSON.parse(event.data);
        if(resp.message != "putChess"){
            console.log("响应类型错误");
            return;
        }
        //判定当前响应是自己落子还是对方落子
        if(resp.userId == gameInfo.thisUserId){
            //自己落子，根据自己子的颜色绘制棋子
            oneStep(resp.col,resp.row,gameInfo.isWhite);
        }else if(resp.userId != gameInfo.thisUserId){
            //绘制对手的子
            oneStep(resp.col,resp.row,!gameInfo.isWhite);
        }else{
            //响应错误，userid有问题
            console.log("[handlerPutChess] resp userId 错误");
            return;
        }

        //给对应位置设置为1，判定当前位置已经有子
        chessBoard[resp.row][resp.col] = 1;
        //交换落子轮次
        me = !me;
        setScreenText(me);

        //判定游戏是否结束
        let screenDiv = document.querySelector("#screen");
        if(resp.winner != 0){
            if(resp.winner == gameInfo.thisUserId){
                // alert("你赢了");
                screenDiv.innerHTML = "你赢了";
            }else if(resp.winner == gameInfo.thatUserId){
                // alert("你输了");
                screenDiv.innerHTML = "你输了";
            }else{
                alert("winner 字段错误"+resp.winner);
            }
            //回到游戏大厅
            // location.assign("/game_hall.html");

            let backBtn = document.createElement('button');
            backBtn.className = 'return-btn';
            backBtn.innerHTML = '回到大厅';
            backBtn.onclick = function(){
                location.replace("/game_hall.html");
            }
            let fatherDiv = document.querySelector('.container>div');
            fatherDiv.appendChild(backBtn);
        }
    }
}